<template>
  <view class="content">
    <view class="title">
      <text class="thing" style="width: 100rpx"></text>
      <text class="name">登录</text>
      <text class="thing" style="width: 300rpx"></text>
    </view>
    <view class="form-box">
      <view class="row-input">
        <image src="@/static/images/f9807.png"> </image>
        <input placeholder="手机号码" maxlength="18" v-model="form.mobile" />
      </view>
      <view class="row-input" v-show="state.isPasswordLogin">
        <image src="@/static/images/44d0.png"> </image>
        <input
          placeholder="登陆密码"
          :password="isShowPassword"
          v-model="form.password"
        />
        <image
          v-if="isShowPassword"
          @click="showOrHide"
          src="@/static/images/2b7b.png"
        >
        </image>
        <image v-else @click="showOrHide" src="@/static/images/d0d.png">
        </image>
      </view>
      <view class="row-input" v-show="!state.isPasswordLogin">
        <image src="@/static/images/code.png"> </image>
        <input
          v-model="form.code"
          style="width: 360rpx"
          placeholder="输入验证码"
          maxlength="6"
          type="number"
        />
        <view class="code" @click="getCodeClick">
          <text v-if="state.timeShow">获取验证码</text>
          <text v-else>{{ state.count }} s 后获取</text>
        </view>
      </view>

      <view class="menu-link">
        <text @click="state.isPasswordLogin = !state.isPasswordLogin">{{
          !state.isPasswordLogin ? '密码登录' : '验证码登录'
        }}</text>
        <text @click="register('1')">找回密码</text>
      </view>
      <view class="login-btn" @click="login">登录</view>
      <view class="tip-link">
        还没有账号?<text @click="register('0')">立即注册</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { reactive, ref, onBeforeUnmount } from 'vue'
import {
  sendCode,
  mplogin,
  mclogin,
  changePassword,
  getUserInfo
} from '@/api/modules/user'
import { isMobile } from '@/utils/validate'
import { default as useUserStore } from '@/store/modules/userInfo'

const store = useUserStore()
const state = reactive({
  isPasswordLogin: true,
  // 倒计时
  countDownTime: 60,
  timer: null,
  timeShow: true,
  count: 0,
  code: ''
})
const form = reactive({
  mobile: '',
  code: '',
  password: ''
})
const isShowPassword = ref(true)
// 密码显示/密码隐藏
const showOrHide = () => {
  isShowPassword.value = !isShowPassword.value
}
//登录
const login = () => {
  if (!isMobile(form.mobile)) {
    uni.showToast({
      title: '请输入正确的手机号',
      icon: 'error'
    })
    return false
  }
  uni.showLoading({
    title: '登录中',
    mask: true
  })
  const promise = state.isPasswordLogin ? mplogin(form) : mclogin(form)
  promise
    .then((res) => {
      uni.hideLoading()
      uni.navigateTo({
        url: '/pages/index/index'
      })
      store.$patch((state) => {
        state.userInfo = res.data
      })
      uni.setStorageSync('token', res.data.token)
      // getUserInfo().then((result) => {
      // })
    })
    .finally(() => {
      uni.hideLoading()
    })
}
//获取短信验证码
const getCodeClick = () => {
  sendCode(form.mobile)
    .then((res) => {
      if (!isMobile(form.mobile)) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'error'
        })
        return false
      }
      state.code = res.data
      if (!state.timer) {
        state.count = state.countDownTime
        state.timeShow = false
        state.timer = setInterval(() => {
          if (state.count > 0 && state.count <= state.countDownTime) {
            state.count--
            console.log('count----', state.count)
          } else {
            state.timeShow = true
            clearInterval(state.timer as any)
            state.timer = null
          }
        }, 1000) as any
      }
      uni.showToast({
        title: '验证码发送成功,请注意查收',
        icon: 'success'
      })
    })
    .catch((err) => {
      uni.showToast({
        title: err.data.message,
        icon: 'error'
      })
    })
}
// 注册 找回密码
const register = (type: string) => {
  uni.navigateTo({
    url: '/pages/login/register?type=' + type
  })
}
onBeforeUnmount(() => {
  clearInterval(state.timer as any)
})
</script>

<style scoped lang="scss">
.content {
  padding: 200rpx 40rpx;
}

.title {
  display: flex;
  flex-direction: column;
  height: 200rpx;

  .thing {
    height: 8rpx;
    background-image: linear-gradient(to right, #7e50d7, #2138cd);
  }

  .name {
    font-weight: bold;
    font-size: 50rpx;
    line-height: 120rpx;
    background: linear-gradient(to right, #7e50d7, #2138cd);
    background-clip: text;
    color: transparent;
    letter-spacing: 5rpx;
  }
}

.form-box {
  .row-input {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 110rpx;
    background-color: #2b2f41;
    border-radius: 8rpx;
    margin-bottom: 50rpx;
    .code {
      display: flex;
      justify-content: flex-end;
      letter-spacing: 2rpx;
      width: 180rpx;
      color: #1e70fe;
    }
    .name {
      width: 150rpx;
      letter-spacing: 4rpx;
      color: #ffffff;
    }

    image {
      margin: 0 30rpx;
      flex-shrink: 0;
      width: 38rpx;
      height: 38rpx;
    }

    input {
      width: 460rpx;
      font-size: 30rpx;
      color: #a1a2a3;
    }
  }

  .menu-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 28rpx;
    color: #676c7f;
  }

  .login-btn {
    margin-top: 60rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35rpx;
    letter-spacing: 15rpx;
    color: #ffffff;
    height: 110rpx;
    border-radius: 240rpx;
    background-image: linear-gradient(to right, #7e50d7, #2138cd);
  }

  .tip-link {
    position: fixed;
    letter-spacing: 4rpx;
    bottom: 50rpx;
    left: 40rpx;
    font-size: 28rpx;
    color: #a1a2a3;

    text {
      padding-left: 10rpx;
      color: #226ef0;
    }
  }
}
</style>
